<template>
  <div>
    <navbar>
      <template v-slot:left>
      <div class="back"  @click="backClick">
      <img src="~assets/img/common/back.svg" alt="">
      </div>
      </template>
    <template v-slot:center>
      <div class="title">
     <div v-for="(item,index) in titles" :key="item.acm"
     class="title-item"
     :class="{active: index === currentIndex}"
     @click="titleClick(index)">
     {{item}}
     </div>
     </div>
    </template>
  </navbar>
  </div>
</template>

<script>
import Navbar from '@/components/common/navbar/Navbar.vue'

export default {
  name:"DetailNavBar",
   components:{
    Navbar
  },
  data(){
    return{
      titles:['商品','参数','评论','推荐'],
      currentIndex:0
    }
  },
  methods:{
    titleClick(index){
      this.currentIndex=index;
      this.$emit('titleClick',index)
    },
    backClick(){
      this.$router.back()
    }
  }

}
</script>

<style scoped>
.title{
  display: flex;
}
.title-item{
  flex: 1;
}
.active{
  color: var(--color-high-text);
}
.back img{
 margin-top: 12px;
}
</style>
